<template>
    <el-card>
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
            :size="formSize" status-icon>
            <el-form-item label="事件类别" prop="RYD_TypeId">
                <el-select v-model="ruleForm.RYD_TypeId" placeholder="请选择事件类别" @change="changeTypeId">
                    <el-option :label="item.ryD_DemandTypeName" :value="item.ryD_DemandTypeNo"
                        v-for="(item,index) in levelColumnsDemandType" v-bind:key="index" />
                </el-select>
            </el-form-item>
            <el-form-item label="重要级别" prop="RYD_Level">
                <el-select v-model="ruleForm.RYD_Level" placeholder="请选择重要级别">
                    <el-option :label="item.ryD_DemandLevelName" :value="item.ryD_DemandLevelNo"
                        v-for="(item,index) in levelColumns" v-bind:key="index" />
                </el-select>
            </el-form-item>
            <el-form-item label="IT处理人员" prop="RYD_ItId">
                <el-select v-model="ruleForm.RYD_ItId" placeholder="请选择IT处理人员">
                    <el-option :label="item.ryD_Name" :value="item.ryD_Id" v-for="(item,index) in itColumns"
                        v-bind:key="index" />
                </el-select>
            </el-form-item>
            <el-form-item label="姓名" prop="RYD_UserName">
                <el-input v-model="ruleForm.RYD_UserName" placeholder="用户姓名，非必填" />
            </el-form-item>
            <el-form-item label="位置" prop="RYD_UserAddress">
                <el-input v-model="ruleForm.RYD_UserAddress" placeholder="用户所在位置，非必填" />
            </el-form-item>
            <el-form-item label="IP地址" prop="RYD_UserIp">
                <el-input v-model="ruleForm.RYD_UserIp" placeholder="用户IP地址，非必填" />
            </el-form-item>
            <el-form-item label="联系方式" prop="RYD_UserPhone">
                <el-input v-model="ruleForm.RYD_UserPhone" placeholder="用户联系方式，非必填" />
            </el-form-item>
            <el-form-item label="需求详情" prop="RYD_DemandDetails">
                <el-input v-model="ruleForm.RYD_DemandDetails" type="textarea" rows="3"  placeholder="请填写需求详情"/>
            </el-form-item>
            <el-form-item label="问题原因" prop="RYD_Reason">
                <el-input v-model="ruleForm.RYD_Reason" type="textarea" rows="3"  placeholder="请填写问题原因"/>
            </el-form-item>
            <el-form-item label="解决方案" prop="RYD_Solution">
                <el-input v-model="ruleForm.RYD_Solution" type="textarea" rows="3" placeholder="请填写解决方案" />
            </el-form-item>
            
            <el-form-item label="加入知识库：" prop="RYD_KBId">
                    <el-switch v-model="ruleForm.RYD_KBId" />
                </el-form-item>
            <el-form-item label="文件上传">
                <el-upload action="/api/UpImage" :on-exceed="exceed" v-model:file-list="fileArr" accept="image/*"
                    :limit="3" list-type="picture-card" :auto-upload="false" ref="upload" style="position: relative;"
                    :on-success="successFile" :show-file-list="true">
                    <el-icon>
                        <Plus />
                    </el-icon>
                    <template #file="{ file }">
                        <el-image style="width: 100%; height: 100%" ref="fileImage" :src="file.url"
                            :preview-src-list="[file.url]" class="imageFile" />
                        <span class="removeSpan" @click="handleRemove(file)">
                            <el-icon>
                                <Delete />
                            </el-icon>
                        </span>
                    </template>
                </el-upload>

            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>

        </el-form>
    </el-card>
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="30%">
        <span>{{dialogText}}</span>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
  
<script setup>
import { inject, reactive, ref } from 'vue'
// eslint-disable-next-line no-unused-vars
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'

import axios from '@/utils/axios'
// eslint-disable-next-line no-unused-vars
import { ElNotification } from 'element-plus';

const formSize = ref('default')
const ruleFormRef = ref()
const ruleForm = ref({
    RYD_UserName: '',
    RYD_UserAddress: '',
    RYD_UserIp: '',
    RYD_UserPhone: '',
    RYD_TypeId: '',
    RYD_Level: '',
    RYD_DemandDetails: '',
    RYD_ItId: '',
    RYD_Reason: '',
    RYD_Solution: '',
    RYD_KBId: 'false',
})


let levelColumns = ref();
let itColumns = ref();
let RYD_UserId = inject('RYD_UserId');
let RYD_Company = ref();
// const disabled = ref(false)
let levelColumnsDemandType = ref();
let fileArr = ref([]);
let fileImage = ref();

let dialogVisible = ref(false)
let dialogTitle = ref("提示")

let dialogText = ref('')

const rules = reactive({
    RYD_ItId: [
        { required: true, message: '请选择IT处理人员', trigger: 'change' },
    ],
    RYD_TypeId: [
        {
            required: true,
            message: '请选择事件类别',
            trigger: 'change',
        },
    ],
    RYD_Level: [
        {
            required: true,
            message: '请选择重要级别',
            trigger: 'change',
        },
    ],
    RYD_DemandDetails: [
        { required: true, message: '请输入需求详情', trigger: 'blur' },
    ],
    RYD_Reason: [
        { required: true, message: '请输入问题原因', trigger: 'blur' },
    ],
    RYD_Solution: [
        { required: true, message: '请输入解决方案', trigger: 'blur' },
    ],
})
let upload = ref();

let changeTypeId = (item) => {
    itColumns.value = [];
    ruleForm.value.RYD_ItId = undefined;
    axios({
        method: 'get',
        url: '/api/GetAllIt?RYD_Company=' + RYD_Company.value+"&RYD_TypeId="+item
    }).then(res => {
        itColumns.value = res;
    })
}


// let srcList = ref([]);
const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid) => {
        if (valid) {
            if (fileArr.value.length != 0) {
                upload.value.submit();
            } else {
                addDemand();
            }
        }
    })
}
let urlImage = "";
const successFile = (res, item) => {
    fileArr.value.splice(fileArr.value.indexOf(item), 1)
    urlImage += res + "|";
    if (fileArr.value.length == 0) {

        addDemand();
    }
}
const addDemand = () => {
    let urlImageR = urlImage + "";
    urlImage = "";
    axios({
        method: 'post',
        url: '/api/RecordDemandW',
        data: {
            ...ruleForm.value,
            RYD_Files: urlImageR,
            RYD_UserId: RYD_UserId,
            RYD_Company: RYD_Company.value,
            RYD_KBId:ruleForm.value.RYD_KBId+""
        }
    }).then(res => {

        if (res == true ||res=="true") {
            resetForm(ruleFormRef.value);
            dialogVisible.value = true;
            dialogText.value = "需求记录成功。"
        } else {
            dialogVisible.value = true;
            dialogText.value = "需求记录失败。"

        }

    }).catch(() => {
        dialogVisible.value = true;
        dialogText.value = "需求提交失败，请检查订单信息或刷新页面。"
    })
}
const exceed = () => {

    ElNotification({
        title: '提示',
        message: '超出最大限制3，添加失败',
        type: 'error',
    })
}

const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}

const handleRemove = (file) => {
    fileArr.value.splice(fileArr.value.indexOf(file), 1)
}





initData();
function initData() {

    Promise.all(
        [
            axios({
                method: 'get',
                url: '/api/DemandLevels',
            }).then(res => {
                levelColumns.value = res;
            }),

            axios({
                method: 'get',
                url: '/api/GetCompany?RYD_UserId=' + RYD_UserId
            }).then(res => {
                RYD_Company.value = res;
                axios({
                    method: 'get',
                    url: '/api/DemandType?RYD_Company=' + res,
                }).then(res => {
                    levelColumnsDemandType.value = res;
                });
                axios({
                    method: 'get',
                    url: '/api/GetAllIt?RYD_Company=' + RYD_Company.value
                }).then(res => {
                    itColumns.value = res;
                })
            }),

        ]
    ).then(() => {
        // console.log("🚀 ~ file: WindowsAddDemand.vue ~ line 189 ~ initData ~ res", res)
        // loading.value = false;
    })
}

</script>
<style>
.DemandFileImage {
    width: 100%;
}

.removeSpan {
    position: absolute;
    right: 0;
    top: 0;
    background-color: rgb(143, 143, 143);
    height: 20px;
    width: 20px;
    text-align: center;
    line-height: 20px;
    color: #fff;
    border-radius: 0 5px 0 5px;
    cursor: pointer;
}
</style>